<template>
	<view class="zuijin">
		<!-- 标题 -->
		<view class="nav">
			<view>最近阅读</view>
			<image src="/static/index/tui.png" mode="" @click="toBack"></image>
		</view>
		<!-- 管理栏 -->
		<view class="management-bar">
			<view class="management-bar-left">
				<view class="management-bar-left_item" v-show="isShow">
					<u-checkbox-group>
						<u-checkbox v-model="value" shape="circle" @change="quanxuan" :disabled="flag">全部</u-checkbox>
					</u-checkbox-group>
					<text :class="{active:show === true}" @click="del">删除</text>
				</view>
			</view>
			<view class="management-bar-right">
				<u-button size="mini" type="error" plain @click="change" v-if="hidden">管理</u-button>
				<u-button size="mini" type="error" plain @click="change01" v-else>取消</u-button>
			</view>
		</view>
		<!-- 书卡片 -->
		<my-zuijin :shulist="shuList" :dividerShow="true" :isShow="isShow" ref="scard" @active="active" @flagle="flagle"></my-zuijin>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:false, //复选框 全部 的值
				hidden:true, //控制管理和取消按钮的显示隐藏
				isShow:false, //控制复选框 全部 和卡片选中样式的显示隐藏
				show:false, //卡片选中时 删除 的样式
				flag:false,  //是否禁用复选框 全部
				shuList:[
					{
						imgSrc:'/static/temp/item1.png',
						title:'开局快递奖励顶级跑车',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					},
					{
						imgSrc:'/static/temp/item2.png',
						title:'开着拖拉机去蹦迪',
						geng:"更新至1288章",
						author:"月名 著",
						show:false,
						desc:`叶然被【生活体验神豪奖励系统】绑定，只要完成特殊任务
						就会得到系统神豪奖励。 “叮！你完成一单特殊快递系奖励你一... 跑车！！！”级跑车！！！”`
					}
				]
			}
		},
		methods: {
			change(){ //管理按钮
				this.hidden = false; //进行管理按钮和取消按钮的切换
				this.isShow = true; //全部和删除的显示和隐藏
			},
			change01(){ //取消按钮
				this.hidden = true;
				this.isShow = false;
				this.value = false;
				this.shuList.forEach((item)=>{
					item.show = false
				})
			},
			toBack(){ //返回上一级
				uni.switchTab({
				    url: '/pages/my/my'
				});
			},
			quanxuan(){ //全选功能
				// console.log(111)
				if( !this.value){
					//调用子组件的方法
					this.$refs.scard.quanXuan()
				}else{
					this.$refs.scard.unquanXuan()
				}
				
			},
			active(i,t){ //全选样式
				//console.log(i)
				this.value = i
				this.show = t
			},
			flagle(i){ //是否禁用复选框
				this.flag = i
			},
			del(){//删除功能
				//console.log(1111)
				this.$refs.scard.del()
				
			}
		}
	}
</script>

<style scoped lang="scss">
.zuijin{
	display: flex;
	flex-direction: column;
	.nav{
		// margin-top: 20rpx;
		padding: 87rpx 54rpx 0 35rpx;
		display: flex;
		justify-content: space-between;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		view{
			font-size: 46rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #000000;
		}
	}
	.management-bar{
		margin-top: 15rpx;
		height: 88rpx;
		padding: 29rpx 37rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.management-bar-left{
			.management-bar-left_item{
				display: flex;
				align-items: center;
				.active{
					color: red;
				}
			}
		}
	}
}
</style>
